<template>
    <el-container>
      <el-header height="80px">
        <div>
          <search></search>
        </div>
      </el-header>
      <el-main>
        <el-container>
          <el-aside width="340px" style="height:680px">
              <div class="demo-basic--circle">
                <el-avatar
                    :size="90"
                    :src="circleUrl"
                  ></el-avatar>
              </div>
              <div class="block" style="margin-left:0px">
                  <span>{{username}}</span>
              </div>
              <el-card class="box-card1"  shadow="always" style="margin-left:20px;margin-top:8px;margin-bottom:16px">  
                <el-form style="margin-top:10px">
                  <!-- <el-form-item label="用户角色" label-width="75px">
                    <el-col :span="22">
                    <el-input
                      v-model="status"
                      disabled>
                    </el-input>
                    </el-col>
                  </el-form-item> -->
                  <el-form-item label="性别" label-width="75px"> 
                    <el-col :span="20">
                    <el-input
                      v-model="sex"
                      disabled>
                    </el-input>
                    </el-col>
                  </el-form-item>
                  <!-- <el-form-item label="邮箱" label-width="75px">
                    <el-col :span="22">
                    <el-input
                      v-model="mail"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="手机号" label-width="75px">
                    <el-col :span="22">
                    <el-input
                      v-model="phonenumber"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item> -->
                  <el-form-item label="年龄" label-width="75px">
                    <el-col :span="20">
                    <el-input
                      v-model="age"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="政治面貌" label-width="75px">
                    <el-col :span="20">
                    <el-input
                      v-model="politics"
                      type="text"
                      disabled>
                    </el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="职业" label-width="75px">
                    <el-col :span="20">
                    <el-input
                      v-model="occupation"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="婚姻状况" label-width="75px">
                    <el-col :span="20">
                    <el-input
                      v-model="marriage"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item>
                  <!-- <el-form-item label="星座" label-width="80px">
                    <el-col :span="20">
                    <el-input
                      v-model="constellation"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item> -->
                  <el-form-item label="国籍" label-width="75px">
                    <el-col :span="20">
                    <el-input
                      v-model="nation"
                      type="text"
                      disabled
                    ></el-input>
                    </el-col>
                  </el-form-item>
                </el-form>
              </el-card>
          </el-aside>
          <el-main>
                <el-card class="box-card2">
                    <div slot="header" class="clearfix">
                      <span style="float: left"><b>用户特征</b></span>
                    </div>
                    <!-- 用户特征图表 -->
                    
                    <div class="echarts">
                      <div id="mychart_total" style="width: 800px;height:565px;"></div>
                    </div>
                </el-card>  
          </el-main>
        </el-container>
      </el-main>
      <el-footer height="580px" v-if="showflag">
                <el-card class="box-card3" shadow="always">
                  <div slot="header" class="clearfix">
                    <span style="float: left"><b>兴趣特征</b></span>
                  </div>
                  <el-row :gutter="18">
                    <el-col :span="12">
                      <div class="echarts">
                        <div id="mychart_CC" style="width: 560px;height:400px;"></div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="echarts">
                        <div id="mychart_S" style="width: 560px;height:400px;"></div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
                
      </el-footer>         
    </el-container>
</template>

<script>
import userutil from '../../utils/userutil'
import search from '../../components/search.vue'
export default {
  components: { search },

    data() {
      return {
        showflag:false,
        res:'',
        text: '',
        username:'',
        sex:'女',
        mail: '',
        age: '21',
        phonenumber: '',
        politics: '群众',
        occupation: '学生',
        marriage: '未婚',
        constellation: '天蝎座',
        nation: '中国',
        circleUrl:
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        userfile:{},
      }
    },
    created(){
      this.getchart();
      this.username=localStorage.getItem("username")
      this.mail=localStorage.getItem("mail")
      this.phonenumber=localStorage.getItem("phonenumber")

    },
    mounted(){ 
      var that=this
      userutil.$on('userdata',function(res){
        that.res=res

        that.username=res.username
        that.sex=res.gender
        that.mail=res.email
        that.age=res.age
        that.phonenumber=res.mobile
        that.politics=res.politicalFace
        that.occupation=res.job
        that.marriage=res.marriage
        that.constellation=res.constellation
        that.nation=res.nationality

        that.userfile.browseTime="浏览时间-"+res.browseTime
        that.userfile.buyProductName="购买记录-"+res.buyProductName
        that.userfile.consumeAbility="消费能力-"+res.consumeAbility
        that.userfile.customerServiceFrequency="咨询记录-"+res.customerServiceFrequency
        that.userfile.device="设备-"+res.device
        that.userfile.exchangeRate="换货记录-"+res.exchangeRate
        that.userfile.favorBrand_0="最喜欢品牌-"+res.favorBrand_0
        that.userfile.favorBrand_1="最喜欢品牌-"+res.favorBrand_1
        that.userfile.favorProduct_0="偏好商品-"+res.favorProduct_0
        that.userfile.favorProduct_1="偏好商品-"+res.favorProduct_1
        that.userfile.favorProduct_2="偏好商品-"+res.favorProduct_2
        that.userfile.favorProduct_3="偏好商品-"+res.favorProduct_3
        that.userfile.favorProduct_4="偏好商品-"+res.favorProduct_4
        that.userfile.favorProduct_5="偏好商品-"+res.favorProduct_5
        that.userfile.favorProduct_6="偏好商品-"+res.favorProduct_6
        that.userfile.favorProduct_7="偏好商品-"+res.favorProduct_7
        that.userfile.favorProduct_8="偏好商品-"+res.favorProduct_8
        that.userfile.favorProduct_9="偏好商品-"+res.favorProduct_9
        that.userfile.favorType_0="偏好品类-"+res.favorType_0
        that.userfile.favorType_1="偏好品类-"+res.favorType_1
        that.userfile.favorType_2="偏好品类-"+res.favorType_2
        that.userfile.favorType_3="偏好品类-"+res.favorType_3
        that.userfile.favorType_4="偏好品类-"+res.favorType_4
        that.userfile.favorType_5="偏好品类-"+res.favorType_5
        that.userfile.favorType_6="偏好品类-"+res.favorType_6
        that.userfile.favorType_7="偏好品类-"+res.favorType_7
        that.userfile.favorType_8="偏好品类-"+res.favorType_8
        that.userfile.favorType_9="偏好品类-"+res.favorType_9

        that.userfile.frequency="购买频率-"+res.frequency
        that.userfile.internal="消费周期-"+res.internal
        that.userfile.lastLogin="最后一次登录-"+res.lastLogin
        that.userfile.loginfrequency="登录频率-"+res.loginfrequency
        that.userfile.max_Amount="订单最大金额-"+res.max_Amount
        that.userfile.paymentCode="支付方式-"+res.paymentCode
        that.userfile.perTicketSales="客单价-"+res.perTicketSales
        that.userfile.productName="购买过-"+res.productName
        that.userfile.purchasefrequency="购买频率-"+res.purchasefrequency
        that.userfile.ref_url="浏览url-"+res.ref_url
        that.userfile.loc_url="浏览页面-"+res.loc_url
        that.userfile.returnRate="退货率-"+res.returnRate
        that.userfile.timeSlot="访问时间段-"+res.timeSlot
        console.log("赋值函数执行")
        that.showflag=true
        that.getchart()
      })
    },
    methods:{
      // showd(){
      //   console.log("1222222222222222222222")
      //   console.log(this.username)
      //   console.log(this.sex)
      // },
      getchart(){
        //图表数据部分
        var  option_total={
              // title: {
              //     text: 'Google Trends',
              // },
              tooltip: {
                  show: true
              },
              series: [{
                  name: 'Google Trends',
                  type: 'wordCloud',
                  size: ['100%', '100%'],
                  textRotation : [0, 45, 90, -45],
                  textPadding: 0,
                  // autoSize: {
                  //     enable: true,
                  //     minSize: 26
                  // },
                  sizeRange:[18,120],
                  data: [
                      {
                          name: this.username,
                          value: 30000,
                           
                      },
                      {
                          name: this.sex,
                          value: 25000,
                          
                      },
                      {
                          name: this.age,
                          value: 4386,
                          
                      },
                      {
                          name: this.job,
                          value: 9386,
                          
                      },
                      {
                          name: this.mail,
                          value: 4055,
                          
                      },
                      {
                          name: this.politics,
                          value: 6055,
                          
                      },
                      {
                          name: this.nation,
                          value: 2467,
                      },
                      {
                          name: this.userfile.buyProductName,
                          value: 2244,
                      },
                      {
                          name: this.userfile.consumeAbility,
                          value: 1898,
                      },
                      {
                          name: this.userfile.timeslot,
                          value: 36665,
                      },
                      {
                          name: this.userfile.customerServiceFrequency,
                          value: 1484,
                      },
                      {
                          name: this.userfile.device,
                          value: 6666,
                      },
                      {
                          name: this.userfile.exchangeRate,
                          value: 965,
                      },
                      {
                          name: this.userfile.favorBrand_0,
                          value: 65500,
                      },
                      {
                          name: this.userfile.favorBrand_1,
                          value: 5962,
                      },
                      {
                          name: this.userfile.favorProduct_0,
                          value: 30000,
                      },
                      {
                          name: this.userfile.favorProduct_1,
                          value: 12000,
                      },
                      {
                          name: this.userfile.favorProduct_2,
                          value: 16200,
                      },
                      {
                          name: this.userfile.favorProduct_3,
                          value: 20885,
                      },
                      {
                          name: this.userfile.favorProduct_4,
                          value: 360,
                      },
                      {
                          name: this.userfile.favorProduct_5,
                          value: 282,
                      },
                      {
                          name: this.userfile.favorProduct_6,
                          value: 273,
                      },
                      {
                          name: this.userfile.favorProduct_7,
                          value: 20000,
                      },
                      {
                          name: this.userfile.favorProduct_8,
                          value: 360,
                      },
                      {
                          name: this.userfile.favorProduct_9,
                          value: 282,
                      },
                      {
                          name: this.userfile.paymentCode,
                          value: 3000,
                      },
                      {
                          name: this.userfile.loginfrequency,
                          value: 10000,
                      },
                      {
                          name: this.userfile.internal,
                          value: 20000,
                      },
                      {
                          name: this.userfile.lastLogin,
                          value: 360,
                      },
                      {
                          name: this.userfile.marriage,
                          value: 26000,
                      },
                      {
                          name: this.userfile.purchasefrequency,
                          value: 3000,
                      },
                      {
                          name: this.userfile.ref_url,
                          value: 10000,
                      },
                      {
                          name: this.userfile.perTicketSales,
                          value: 360,
                      },
                      {
                          name: this.constellation,
                          value: 26000,
                      },
                      {
                          name: this.userfile.loc_url,
                          value: 3000,
                      },
                      {
                          name: this.userfile.returnRate,
                          value: 10000,
                      }
                  ],
                  textStyle:{
                    value:[1000,20000,30000],
                    color:function() {return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'}
                  } 
              }]
            }
        var option_CC = {
              title: {
                 text: '最喜爱品类',
              },
              legend: {
                  top: 'bottom'
              },
              toolbox: {
                  show: true,
                  feature: {
                      mark: {show: true},
                      dataView: {show: true, readOnly: false},
                      restore: {show: true},
                      saveAsImage: {show: true}
                  }
              },
              series: [
                  {
                      name: '面积模式',
                      type: 'pie',
                      radius: [30, 100],
                      center: ['50%', '50%'],
                      roseType: 'area',
                      itemStyle: {
                          borderRadius: 8
                      },
                      data: [
                          {value: 66, name: this.userfile.favorType_0},
                          {value: 54, name: this.userfile.favorType_1},
                          {value: 49, name: this.userfile.favorType_2},
                          {value: 41, name: this.userfile.favorType_3},
                          {value: 36, name: this.userfile.favorType_4},
                          {value: 28, name: this.userfile.favorType_5},
                          {value: 26, name: this.userfile.favorType_6},
                          {value: 20, name: this.userfile.favorType_7},
                          {value: 18, name: this.userfile.favorType_8},
                          {value: 12, name: this.userfile.favorType_9},
                          
                      ]
                  }
              ]
          }
        var option_S = {
            title: {
                 text: '最喜爱商品',
              },
              toolbox: {
                  show: true,
                  feature: {
                      mark: {show: true},
                      dataView: {show: true, readOnly: false},
                      restore: {show: true},
                      saveAsImage: {show: true}
                  }
              },
              grid:{
                bottom:100
              },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '2%',
                // left: 'center'
                top: 'bottom'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['20%', '38%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'bottom'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 1048, name: this.userfile.favorProduct_0},
                        {value: 735, name: this.userfile.favorProduct_1},
                        {value: 2650, name: this.userfile.favorProduct_2},
                        {value: 484, name: this.userfile.favorProduct_3},
                        {value: 300, name: this.userfile.favorProduct_4},
                        {value: 150, name: this.userfile.favorProduct_5},
                        {value: 50, name: this.userfile.favorProduct_6},
                        {value: 999, name: this.userfile.favorProduct_7},
                        {value: 210, name: this.userfile.favorProduct_8},
                        {value: 100, name: this.userfile.favorProduct_9},
                        
                    ]
                }
            ]
        }; 

            let newPromise = new Promise((resolve) => {
              resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
              //	此dom为echarts图表展示dom
              
              var mychart_total=this.$echarts.init(document.getElementById('mychart_total'));
              mychart_total.setOption(option_total)

              var mychart_CC=this.$echarts.init(document.getElementById('mychart_CC'));
              mychart_CC.setOption(option_CC)

              var mychart_S=this.$echarts.init(document.getElementById('mychart_S'));
              mychart_S.setOption(option_S)


            })      
      },
      createRandomItemStyle(){
        return {
            "color": 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
            ].join(',') + ')'
        };
      },
    }
}

</script>

<style scoped>
.el-header {
    text-align: center;
    background-color: #b3c0d1;
  }
  .el-footer {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    
  }
  .el-aside {
    line-height: 44px;
    text-align: center;
    background-color: #d3dce6;
  }
  .el-main {
    text-align: center;
    background-color: #e9eef3;
    padding:0px
  }

  .demo-basic--circle {
    margin-top: 30px;
  }
  .block {
    margin-left: 25px;
    font-weight: bold;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card1 {
    width: 300px;
    border-radius: 20px;
    text-align: center;
  }
  .box-card2 {
    width: 840px;
    height: 660px;
    border-radius: 20px;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .box-card3 {
    width: 1180px;
    border-radius: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
</style>

